<template>
  <div>
    <div class="HomeView">

   
      <div class="container">

        <router-view></router-view>
        
      <div class="foot-box" v-show="!this.$route.meta.ShowAndHide">
        <div class="footbox">
          <div class="footer" @click="home">
            <div class="img">

              <img :src="one" alt="">
            </div>
            <a ref="a"  class="con">首页</a>
          </div>

          <div class="footer" @click="Library">
            <div class="img">
              <img :src="two" alt="">
            </div>
            <a ref="b">借书</a>

          </div>

          <!-- <div class="footer">
            <div class="img">
              <router-link tag="a" to="/DeskView" > <img src="./assets/img/tab_desk_sel.png" alt=""></router-link>

            </div>
          </div> -->

          <!-- <div class="footer" >
            <div class="img">
              <img src="./assets/img/tab_community_sel.png" alt="">
            </div>
            <router-link tag="a" to="/CircleView">社区</router-link>

          </div> -->

          <div class="footer" @click="mine">
            <div class="img">
              <img :src="three" alt="">
            </div>
            <a ref="c">我的</a>
          </div>
        </div>

      </div>

      </div>
      
 
      

    </div>

  </div>
</template>

<script>
// import {getkeywords} from "./api/search.js"

export default {

  data(){
    return{
      one:require("./assets/img/tab_home_sel.png"),
      two:require("./assets/img/tab_bookcase_nor.png"),
      three:require("./assets/img/tab_profile_nor.png")
    }
  },
  
methods:{

  home(){
    this.$router.push("/HomeView")
    this.one = require("./assets/img/tab_home_sel.png")
    this.two = require("./assets/img/tab_bookcase_nor.png")
    this.three = require("./assets/img/tab_profile_nor.png")
    this.$refs.a.style.color = "#478d6b"
    this.$refs.b.style.color = "#000"
    this.$refs.c.style.color = "#000"
  },
  
  Library(){
    this.$router.push("/LibraryView")
    this.one = require("./assets/img/tab_home_nor.png") 
    this.two = require("./assets/img/tab_bookcase_sel.png") 
    this.three = require("./assets/img/tab_profile_nor.png") 
    this.$refs.a.style.color = "#000"
    this.$refs.b.style.color = "#478d6b"
    this.$refs.c.style.color = "#000"
  },
  mine(){
    this.$router.push("/MineView")
    this.one = require("./assets/img/tab_home_nor.png") 
    this.two = require("./assets/img/tab_bookcase_nor.png") 
    this.three = require("./assets/img/tab_profile_sel.png") 
    this.$refs.a.style.color = "#000"
    this.$refs.b.style.color = "#000"
    this.$refs.c.style.color = "#478d6b"
  }

  


  // getkeywordsFun(){
  //   getkeywords({ keyword: '唐诗' }).then((data) => {
  //       // console.log(data.data.records)
  //       // this.lists = data.data.records
  //       // console.log("lists:",this.lists)
  //       console.log(data);
  //       this.words = data.data.books
  //       console.log("word",this.words)
  //     })
  // }
},
created(){
    // 调用方法
    // this.getkeywordsFun();
    // this.getExpressDataFun()
    // let a = localStorage.historyList;
    // if (a) {
    //   // 将数组转字符串
    //   this.historyList = JSON.parse(a);
    // }
  }
  
}
</script>

<style lang="scss" >

@import './assets/css/base.css';

body{
  background-color: #f6f6f6;
}

/* 底部部分 */
.foot-box {
  width: 100%;
  position: fixed;
  bottom: -1px;
  background-color: #fff;
  padding-top: 4px;
  padding-bottom: 7px;
  box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.21);
  .footbox {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.footbox {
  .footer {
    display: flex;
    flex-direction: column;
    .img {
      width: 25px;
      height: 25px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    a {
      font-size: 12px;
      color: #8a929e;
      &.router-link-active{
          color: #478d6b;
        }
      
    }

    .con{
      color: #478d6b;
    }
    &:nth-child(3) {
      .img {
        width: 25px;
        height: 25px;
      }
    }
  }
}



</style>